<template>
  <div class="pay">
    <van-cell class="course-info">
      <img :src="course.courseImgUrl"/>
      <div class="price-info">
        <p class="course-name" v-text="course.courseName"></p>
        <p class="discounts">¥{{course.discounts}}</p>
      </div>
    </van-cell>

    <van-cell class="account-info">
      <p>购买信息</p>
      <p class="description">购买课程后使用此账号登录【拉勾教育】学习课程</p>
      <p>当前账号：{{username}}</p>
    </van-cell>

    <van-cell class="pay-channel">
      <p>支付方式</p>
    </van-cell>

    <van-radio-group v-model="payChannel" class="pay-channel-options">
      <van-cell-group>
        <van-cell clickable @click="payChannel = 'weChat'" class="pay-channel-option" :border="false">
          <template #title>
            <img src="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png">
            <span>微信支付</span>
          </template>
          <template #right-icon>
            <van-radio name="weChat"/>
          </template>
        </van-cell>
        <van-cell clickable @click="payChannel = 'aliPay'" class="pay-channel-option" :border="false">
          <template #title>
            <img src="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png">
            <span>支付宝支付</span>
          </template>
          <template #right-icon>
            <van-radio name="aliPay"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <van-cell class="pay-button-container">
      <van-button class="pay-button" @click="handlePay">¥{{course.discounts}}立即支付</van-button>
    </van-cell>
  </div>
</template>

<script>
  import { getCourseById } from '@/services/course'
  import { createBusinessOrder } from '@/services/order'
  import { createPayOrder, getPayResult } from '@/services/pay'
  import { Toast } from 'vant'

  export default {
    name: 'Pay',
    props: {
      courseId: {
        type: [Number, String],
        required: true,
      },
    },
    data() {
      return {
        course: {},
        payChannel: 'weChat',
        orderNo: null, // 订单号
      }
    },
    computed: {
      username() {
        const user = this.$store.state.user
        return `${user.organization.substr(0, 3)}****${user.organization.substr(8, 4)}`
      }
    },
    created() {
      this.loadCourseInfo()
      this.loadOrder()
    },
    methods: {
      async loadCourseInfo() {
        const { content } = await getCourseById(this.courseId)
        this.course = content
      },
      async loadOrder() {
        const { content } = await createBusinessOrder({
          goodsId: this.courseId,
        })
        this.orderNo = content.orderNo
      },
      async handlePay() {
        const { content: payOrder } = await createPayOrder({
          goodsOrderNo: this.orderNo,
          channel: this.payChannel,
          returnUrl: 'http://edufront.lagou.com/'
        })
        window.location.href = payOrder.payUrl // 接收响应地址，并进行跳转

        const timer = setInterval(async () => {
          const { content: payResult } = await getPayResult(this.orderNo)
          if (payResult && payResult.status === 2) {
            clearInterval(timer)
            Toast.success('支付成功')
            this.$router.push({
              name: 'learn'
            })
          }
        }, 1e3)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pay {
    background: #f8f9fa;
  }

  .course-info .van-cell__value {
    display: flex;

    img {
      width: 80px;
      height: 107px;
    }

    .price-info {
      margin-left: 20px;

      .course-name {
        font-size: 16px;
      }

      .discounts {
        color: #ff7452;
        font-size: 24px;
        font-weight: 700;
      }
    }
  }

  .account-info {
    margin-top: 10px;

    .description {
      color: #999;
    }
  }

  .pay-channel {
    margin-top: 10px;
  }

  .pay-channel-options {
    margin-top: -1px;

    .pay-channel-option .van-cell__title {
      display: flex;
      align-items: center;

      img {
        width: 28px;
        height: 28px;
        padding: 0 10px;
      }
    }
  }

  .pay-button-container {
    position: fixed;
    bottom: 0;

    .pay-button {
      width: 100%;
      background: orange;
      border-radius: 20px;
      margin-bottom: 10px;
    }
  }

</style>
